<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax请求，显示学生列表</title>
</head>
<body>
<script type="text/javascript">
  window.onload=function (){
    document.getElementById("btn").onclick=function (){
      //1.创建核心对象
      var xhr = new XMLHttpRequest()
      //2.注册回调函数
      xhr.onreadystatechange = function (){
        if (this.readyState == 4) {
          if (this.status == 200) {
            //document.getElementById("stutbody").innerHTML = this.responseText
              //将json格式的字符串转化成json对象
              var stuList = JSON.parse(this.responseText)//是一个数组，并且数组中有多个学生数据
              //循环处理数组数据
              var html = ""
              for(var i = 0; i< stuList.length; i++){
                  var stu = stuList[i]
                  html += "</tr>"+"<td>"+ stu.id +"</td>\n" +
                      "<td>"+stu.username+"</td>\n" +
                      "<td>"+stu.age+"</td>\n" +
                      "<td>"+stu.city+"</td>\n" +
                      "</tr>"
              }
              document.getElementById("stutbody").innerHTML = html
          }else{
            alert(this.status)
          }

        }
      }
      //3.开启通道
      //避免缓存，可以加时间戳
      xhr.open("GET","/ajax02/display?t="+new Date().getTime(),true)
      //4.发送请求
      xhr.send()
    }
  }
</script>
<input type="button" value="显示学员列表" id="btn">
<table width="50%" border="1px">
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>住址</th>
  </tr>
  <tbody id="stutbody">
<!--    <tr>-->
<!--      <td>1</td>-->
<!--      <td>张三</td>-->
<!--      <td>20</td>-->
<!--      <td>北京大兴区</td>-->
<!--    </tr>-->
<!--    <tr>-->
<!--      <td>2</td>-->
<!--      <td>李四</td>-->
<!--      <td>23</td>-->
<!--      <td>四川成都</td>-->
<!--    </tr>-->
  </tbody>
</table>
</body>
</html>